[#assign title]充值记录[/#assign]
[#include "/common/_layout.html"/]
[#macro style]
<style></style>
[/#macro]
[#macro body]
<div class="row">
    <mt-cell class="col-12 px-0" is-link to="/recharge/index">
        <template slot="title">
            金豆:<span class="text-danger">{{customer.balance | formatDecimal}}</span>
        </template>
        <span class="text-danger">去充值</span>
    </mt-cell>
</div>
<div class="row">
    <div class="col-12 px-0 pre-scrollable"
         :style="{'max-height': orderRecordHeight}">
        <mt-loadmore :top-method="refresh" ref="loadmore"
                     infinite-scroll-disabled="allLoaded" v-infinite-scroll="loadMore" infinite-scroll-distance="30">
            <mt-cell v-for="order in orderRecordList" is-link :to="'/order/recharge/detail/' + order.sn">
                <template slot="title">
                    <span class="mint-cell-text">
                        {{order.status | orderStatusFilter}}
                        <span class="text-danger" v-if="order.expire && new Date(order.expire) < new Date()">(已过期)</span>
                    </span>
                    <span class="mint-cell-label">{{order.createdDate | formatDate}}</span>
                </template>
                <span :class="[order.status == 'COMPLETED' ? 'text-success' : 'text-danger']">{{order.receiveAmount + order.exchangeAmount}}金豆</span>
            </mt-cell>
        </mt-loadmore>
        <div class="page-infinite-loading text-center">
            <span v-show="allLoaded">没有更多了</span>
            <span v-show="!allLoaded">
                <mt-spinner type="fading-circle"></mt-spinner>
                加载中...
            </span>
        </div>
    </div>
</div>
[/#macro]
[#macro script]
<script>
    var app = new Vue({
        el: '#app',
        data: {
            page: 0,
            allLoaded: false,
            customer: {},
            orderRecordList: [],
            orderStatusMapping: {},
            orderRecordHeight: '0px'
        },
        methods: {
            /** 计算充值记录面板高度 */
            calcOrderRecordHeight: function () {
                var vm = this;
                vm.$nextTick(function () {
                    vm.orderRecordHeight = vm.calcScrollHeight('.pre-scrollable') + 'px';
                });
            },
            refresh: function () {
                var vm = this;
                vm.page = 1;
                vm.allLoaded = false;
                axios.post('/order/recharge/list', {page: vm.page}).then(function (response) {
                    vm.orderRecordList = response.data.data;
                    vm.$refs.loadmore.onTopLoaded();
                }).catch(function (err) {
                    vm.$refs.loadmore.onTopLoaded();
                });
            },
            loadMore: function () {
                var vm = this;
                vm.page++;
                axios.post('/order/recharge/list', {page: vm.page}).then(function (response) {
                    var data = response.data;
                    vm.orderRecordList = vm.orderRecordList.concat(data.data);
                    if (data.code) {
                        vm.allLoaded = true;
                    }
                    // vm.$refs.loadmore.onBottomLoaded();
                }).catch(function (err) {
                    // vm.$refs.loadmore.onBottomLoaded();
                });
            }
        },
        computed: {},
        filters: {
            orderStatusFilter: function (status) {
                return app.orderStatusMapping[status];
            }
        },
        watch: {},
        mounted: function () {
            var vm = this;
            axios.post('/customer/detail').then(function (response) {
                vm.customer = response.data;
                vm.calcOrderRecordHeight();
            });
            axios.post('/order/recharge/status').then(function (response) {
                vm.orderStatusMapping = response.data;
            });
        }
    });
</script>
[/#macro]